<template>
    <div class="">
        <div class="mar_t20 pad_20 ba_f">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>活动分析</span>
                </div>
            </div>
            <div class="main-icon flex t_l mar_t20">
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">活动订单数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">较前一日：0</p>
                                <p class="fon_12 title6 lh25 mar_l150">总：0</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">活动订单数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">活动订单补贴支出</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">较前一日：0</p>
                                <p class="fon_12 title6 lh25 mar_l150">总：0</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">活动订单补贴支出</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">新客数</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                            <div class="flex">
                                <p class="fon_12 title6 lh25">较前一日：0</p>
                                <p class="fon_12 title6 lh25 mar_l150">总：0</p>
                            </div>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">新客数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                    <span><i class="el-icon-question"></i></span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="t_r mar_t20">
            <div class="fon_12 mar_r10 color_9">
                <span class="fon_14 color_3">时间筛选：</span>
                <el-select v-model="optionsValue" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期"
                        class="mar_l10"
                        v-if="optionsValue=='1'">
                </el-date-picker>
                <el-date-picker
                        v-model="value1"
                        type="month"
                        placeholder="选择月"
                        class="mar_l10"
                        v-if="optionsValue=='2'">
                </el-date-picker>
            </div>
        </div>
        <div class="mar_t10 pad_20 ba_f">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>订单概况</span>
                </div>
<!--                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>-->
            </div>
            <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import {getGoodDetail,} from "@/api/statistics";
    export default {
        name: "goodtongji",
        mounted() {
            // this.init();
            this.init2();

            // if (this.$route.query.id) {
            //     this.bus.$emit('loading', true);
            //     this.id = this.$route.query.id
            //     this.edit()
            // }
        },
        data() {
            return {
                spData:{
                    todayVisitCount:'',
                },
                id:'',
                value1:'',
                options: [{
                    value: '1',
                    label: '自然日'
                }, {
                    value: '2',
                    label: '自然月'
                }],
                optionsValue:'1',
                echarts2_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '订单数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
                        },

                    ]
                },
            }
        },
        components: {},
        methods: {
           // async edit(){
           //      const {data} = await getGoodDetail({id:this.id});
           //      if (data) {
           //          this.result = data.result[0]?data.result[0]:''
           //          this.spData.todayVisitCount = data.todayVisitCount?data.todayVisitCount:0
           //          this.spData.newVisitCount = data.newVisitCount?data.newVisitCount:0
           //          this.spData.totalVisitCount = data.totalVisitCount?data.totalVisitCount:0
           //          this.spData.payCount = data.payCount?data.payCount:0
           //          this.spData.newPayCount = data.newPayCount?data.newPayCount:0
           //          this.spData.totalPayCount = data.totalPayCount?data.totalPayCount:0
           //          this.spData.paySum = data.paySum?data.paySum:0
           //          this.spData.newPaySum = data.newPaySum?data.newPaySum:0
           //          this.spData.totalPaySum = data.totalPaySum?data.totalPaySum:0
           //      }
           //     this.bus.$emit('loading', false)
           //  },
            init2() {
                let myChart = echarts.init(document.getElementById('zhentiEch'))
                myChart.setOption(this.echarts2_option, true)
            },

        }
    };
</script>
<style lang="scss" scoped>
    .goodImg{
        width: 160px;
        height: 120px;
    }
</style>
